<template>
  <div class="in-wrap">
    <!-- 公共头引入 -->
    <header id="header">
      <section class="container">
        <h1 id="logo">
          <a href="http://localhost:3000" title="谷粒学院">
            <img src="~/assets/img/logo.png" width="100%" alt="谷粒学院">
          </a>
        </h1>
        <div class="h-r-nsl">
          <ul class="nav">
            <router-link to="/" tag="li" active-class="current" exact>
              <a>首页</a>
            </router-link>
            <router-link to="/course" tag="li" active-class="current">
              <a>课程</a>
            </router-link>
            <router-link to="/teacher" tag="li" active-class="current">
              <a>名师</a>
            </router-link>
          </ul>
          <!-- / nav -->
           <!-- / nav -->
          <ul class="h-r-login">
              <li v-if="usertoken == ''" id="no-login">
                  <a href="/login" title="登录">
                      <em class="icon18 login-icon">&nbsp;</em>
                      <span class="vam ml5">登录</span>
                  </a>
                  |
                  <a href="/register" title="注册">
                      <span class="vam ml5">注册</span>
                  </a>
              </li>
              <li v-else id="is-login-two" class="h-r-user">
                  <a href="/ucenter" title>
                      <img
                          :src="avatar"
                          width="30"
                          height="30"
                          class="vam picImg"
                          alt
                          >
                      <span id="userName" class="vam disIb">{{ nickname }}</span>
                  </a>
                  <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
              </li>
              <!-- /未登录显示第1 li；登录后显示第2，3 li -->
          </ul>
          <aside class="h-r-search">
            
              <el-input placeholder="请输入课程名称" v-model="coursename" class="input-with-select" @keyup.enter.native="searchCourseByName">
                <el-button slot="append" icon="el-icon-search" @click="searchCourseByName"></el-button>
              </el-input>
            
          </aside>

        </div>
        <aside class="mw-nav-btn">
          <div class="mw-nav-icon"></div>
        </aside>
        <div class="clear"></div>
      </section>
    </header>
    <!-- /公共头引入 -->
      
    <nuxt/>

    <!-- 公共底引入 -->
    <footer id="footer">
      <section class="container">
        <div class="b-foot">
          <section class="fl col-7">
            <section class="mr20">
              <section class="b-f-link">
                <a href="https://www.zhengzhoudaxue.cn" title="个人网址" target="_blank">个人网站</a>|
                <a href="https://gitee.com/zhengzhoudaxue" title="联系我们" target="_blank">联系我们</a>|
                <a href="https://gitee.com/zhengzhoudaxue" title="帮助中心" target="_blank">帮助中心</a>|
                <a href="https://www.zhengzhoudaxue.cn/MyPersonalProject/images/java.jpg" title="资源下载" target="_blank">资源下载</a><br/>
                <a href="https://gitee.com/zhengzhoudaxue" title="源码地址" target="_blank">源码地址</a>|
                <span>手机号：15343816435</span> | 
                <span>个人邮箱：1757741394@qq.com</span>
              </section>
              <section class="b-f-link mt10">
                <span>©版权归我本人所有  豫ICP备18006404号-1</span>
              </section>
            </section>
          </section>
          <aside class="fl col-3 tac mt15">
            <el-popover
              placement="right"
              width="400"
              trigger="hover">
              <img src="~/assets/img/wechat_me.jpg"/>
              <img slot="reference" src="~/assets/img/wx-icon.png" alt>
            </el-popover>
            <a href="https://weibo.com/6527372353/profile" target="_blank"><img src="~/assets/img/wb-icon.png" alt></a>
          </aside>
          <div class="clear"></div>
        </div>
      </section>
    </footer>
    <!-- /公共底引入 -->
  </div>
</template>
<script>
import '~/assets/css/reset.css'
import '~/assets/css/theme.css'
import '~/assets/css/global.css'
import '~/assets/css/web.css'
import '~/assets/css/base.css'
import '~/assets/css/activity_tab.css'
import '~/assets/css/bottom_rec.css'
import '~/assets/css/nice_select.css'
import '~/assets/css/order.css'
import '~/assets/css/swiper.css'
import "~/assets/css/pages-weixinpay.css"
import Cookie from 'js-cookie'

export default {
  data() {
    return {
        usertoken: '',
        avatar: '',
        nickname: '',
        userinfo:{},
        coursename:'' //课程名
    }
  },
  mounted() {
    if(Cookie.get('usertoken') != undefined){
      this.usertoken = Cookie.get('usertoken')
      this.userinfo = Cookie.get('userinfo')
      this.avatar = JSON.parse(this.userinfo).avatar
      this.nickname = JSON.parse(this.userinfo).nickname
    }
    
  },
  methods:{
    logout(){
      Cookie.remove('usertoken')
      Cookie.remove('userinfo')
      this.usertoken = ''
      this.avatar = ''
      this.nickname = ''
      this.userinfo = {}
    },
    //根据课程名字搜索课程
    searchCourseByName(){
      if(this.coursename == '' || this.coursename.length == 0){
          this.$message({
            message: '请输入要查询课程的名称!',
            type: 'warning'
          });
      }else{
        this.$router.push({name:'search',query: {coursename:this.coursename}})
        this.coursename = ''
        
      }
    }
  }
};

</script>